<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 入门案例</title>
    <!-- 引入 Tailwind CSS（使用 CDN） -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- 登录卡片内容将放在这里 -->
<div class="border p-4">四边都有边框</div>
<!--<div class="flex min-h-screen items-center justify-center bg-gray-100 p-4">
    <div class="w-full max-w-md rounded-lg bg-white p-8 shadow-lg">
        <h1 class="mb-6 text-center text-2xl font-bold text-gray-800">登录</h1>

        &lt;!&ndash; 输入框 &ndash;&gt;
        <div class="space-y-4">
            <div>
                <label for="email" class="mb-2 block text-sm font-medium text-gray-700">
                    邮箱
                </label>
                <input
                        type="email"
                        id="email"
                        class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="请输入邮箱"
                />
            </div>

            <div>
                <label for="password" class="mb-2 block text-sm font-medium text-gray-700">
                    密码
                </label>
                <input
                        type="password"
                        id="password"
                        class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="请输入密码"
                />
            </div>
        </div>

        &lt;!&ndash; 按钮 &ndash;&gt;
        <button class="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2 text-white transition duration-200 hover:bg-blue-700">
            登录
        </button>

        &lt;!&ndash; 底部链接 &ndash;&gt;
        <div class="mt-4 text-center text-sm text-gray-600">
            还没有账号？ <a href="#" class="text-blue-600 hover:text-blue-700">立即注册</a>
        </div>
    </div>
</div>-->
</body>
</html>